<template>
    <div class="header-nav">
        <div class="header-nav-left">
            <slot name="left">
                <i v-if="leftArrow" class="iconfont icon-left"></i>
                <span>{{ leftText }}</span>
            </slot>
        </div>
        <div class="header-nav-title">
            <slot name="default">{{ title }}</slot>
        </div>
        <div class="header-nav-right">
            <slot name="right">{{ rightText }}</slot>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        title:String,
        "left-text":String,
        "right-text":String,
        "left-arrow":{
            type:Boolean,
            default:false,
        }
    },
    mounted () {
        // console.log(this);
    }
}
</script>

<style  scoped>
.header-nav {
    height: 1rem;
    padding: 0 10px;
    background-color: gray;
    line-height: 1rem;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.header-nav .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
</style>